<!--
 * @Description: 
 * @Author: WuShiKang
 * @Date: 2021-04-06 11:43:13
 * @LastEditors: WuShiKang
 * @LastEditTime: 2021-04-16 00:47:16
-->
<template>
  <div>
 <div id="top">
    <div id="toadd">
      <el-button type="primary" size="small" @click="toAdd()">添加</el-button>
      </div>
      <div id="iput"><el-input v-model="input" placeholder="请输入用户名"></el-input>
      </div>
    <div id="xz">
      <el-select v-model="Zroles" placeholder="请选择角色">
        <el-option label="导师" value="导师"></el-option>
        <el-option label="管理员" value="管理员"></el-option>
         <el-option label="学生" value="学生"></el-option>
      </el-select>
  </div>
  <div id="search">
  <el-button type="primary" icon="el-icon-search" size="mini" @click="search()" >搜索</el-button>
  </div>
  </div>
    <el-table :data="UserManageData"  size="small" style="width: 100%">
      <el-table-column type="index"  label="序号"> </el-table-column>
      <el-table-column prop="realname" label="姓名"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="roles[0].name" v-model="rolesN" label="角色"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="telephone" label="手机号"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tag  size="mini" type="success" @click="handleEdit(scope.row)"
            >编辑</el-tag 
          >
         <el-tag  size="mini" type="warning" @click="handleSheZhi(scope.row)"
            >设置</el-tag 
          >
         <el-tag  size="mini" type="info" @click="handleXQing(scope.row)"
            >详情</el-tag 
          >
          <el-tag  size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-tag 
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change='pageChange'
            :page-size='pageSize'
            layout="prev, pager, next"
            :total="total">
            </el-pagination>

    <el-dialog :title="title" :visible.sync="visible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" 
         prop="realname">
          <el-input v-model="form.realname" autocomplete="off" ></el-input>
        </el-form-item>
       <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off" ></el-input>
        </el-form-item>
           <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
         <el-radio v-model="form.gender" label="男">男</el-radio>
         <el-radio v-model="form.gender" label="女">女</el-radio>
        </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth" >
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
           <el-date-picker  v-model="form.registerTime" type="date" placeholder="选择日期">
    </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSave('form')">确 定</el-button>
      </div>
    </el-dialog>
  
<el-dialog title="设置" :visible.sync="visibl">
  <el-form :model="form1">
    <el-form-item label="用户" :label-width="formLabelWidth" >
            {{ form1.realname }}
    </el-form-item>
    <el-form-item label="角色" :label-width="formLabelWidth">
      <el-cascader v-model="form1.roles" :options="roles" :props="props" clearable />
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="visibl = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import axios,{get,post} from '@/utils/request.js'
export default {
  data() {
    return {
      title: "新针栏目",
      input:"",
      Zroles:"",
      rolesN:"",
      roles:[],
      visible: false,
      visibl:false,
      form:{},
      props: { multiple: true, value: 'id', label: 'name', emitPath: false },
      form1:{

      },
      formLabelWidth: "120px",
      rules: {
       realname: [{ required: true, message: "用户不能为空", trigger: "blur" }],
       username: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
      password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
       gender: [{ required: true, message: "性别不能为空", trigger: "blur" }],
      },
      page:1,
      pageSize:6,
      gender:"男"
    };
  },
  computed: {
    ...mapState("UserManage", ["UserManageData"]),
    ...mapState("UserManage",["total"]),
  },
  methods: {
    ...mapActions("UserManage", [
      "findAllUserManage",
      "saveOrUpdataUserManage",
      "deleteById",
      "setRoles"
    ]),
    pageChange(val){
    //   console.log(val)
    this.page = val;
    this.findAllUserManage({page:this.page,pageSize:this.pageSize});
    },
    search(){
      this.findAllUserManage({page:this.page,pageSize:this.pageSize,username:this.input,rolename:this.Zroles});
       },
    save(){
      post('/baseUser/setRoles', {
        id: this.form1.id,
        roles: this.form1.roles
      })
        .then(response => {
          this.visibl = false
          this.$message({ message: response.message, type: 'success' })
        })
      },
    handleEdit(row) {
      // console.log(row);
      this.title = "编辑栏目";
      this.form = { ...row };
      this.visible = true;
    },
     loadRoles() {
      get('/role/findAll')
        .then(response => {
          this.roles = response.data
        })
    },
    handleSheZhi(row){
     this.visibl=true;
     this.form1={...row};
     get('/baseUser/pageQuery',{page:this.page,pageSize:this.pageSize})
        .then(response => {
          response.data.list.forEach(item => {
            item.role_name = item.roles.map(r => r.name).join(',')
            item.roles = item.roles.map(r => r.id)
          })
          })
    },
    handleXQing(row){
      this.$router.push({
        name: '_sys_user_Details',
        query: row
      })
    },
     handleDelete(row) {
      // console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async() => {
         let { id } = row;
      let res = await this.deleteById({ id });
      if (res.status === 200) {
        this.findAllUserManage();
        this.$notify({
          title: "成功",
          message: res.message,
          type: "success",
        });
      }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      
    },
    /**
     * @description: 添加按钮
     * @param {*}
     * @re     turn {*}
     */

    toAdd() {
      this.title = "新增栏目";
      this.form = {};
      this.visible = true;
    },
    toSave(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await this.saveOrUpdataUserManage(this.form);
          console.log(res);
          if (res.status === 200) {
            this.findAllUserManage();
            this.visible = false;
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
          }
        } else {
          alert("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.findAllUserManage();
    this.loadRoles();
  },
  mounted() {},
};
</script>
<style scoped>
#top{
width: 900px;
height:80px;
}
#toadd{
width: 75px;
height: 38px;
float: left;
}
#iput{
  width: 200px;
  height: 38px;
  float: left;
}
#xz{
    width: 200px;
  height: 38px;
  float: left;
}
#search{
width: 75px;
height: 38px;
margin-left: 10px;
margin-top: 5px;
float: left;
}
</style>